body,div,ul,li,ol,pre,h1,h2,h3,h4,h5,h6,dl,dt,dd,input,fieldset,form,textarea,p,th,td,button,blockquote,span,img{margin:0;padding:0;}
body{color:#333; font-family:"微软雅黑", Arial; font-size:18px; line-height: 28px; background: #ffffff;width:100%;}
fieldset,img,input,button{border:0;}
ul,li{list-style-type:none;}
a{ color:#333;text-decoration:none;}
a:hover{ color:#1c599b; text-decoration:none;}




/*index*/
#top{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); background: #fff; padding:10px;}
#top h1{ float: left; height:46px; margin: 10px 0;}
#top h1 img{ height: 100%; float: left;}

.language{ float: left; margin:0 0 0 30px; padding: 22px 0; position: relative;}
.languageA{ float: left; line-height: 18px; padding: 0 22px 0 0; cursor: pointer; background: url("../img/sjx.png") no-repeat right center;}
.languageA i{ float: left; height: 18px; width: 18px;}
.languageA i img{ float: left; width: 100%;}
.languageA p{ float: left; margin: 0 0 0 12px; font-size: 18px;}
.languageB{ position: absolute; left: 0; top: 66px; z-index: 9; width: 100px; padding: 10px 0; border: 1px solid #ddd; display: none; background: #fff;}
.languageB a{ float: left; width: 100%; text-align: center; color: #333; line-height: 36px;}
.languageB a:hover{ color:#1c599b;}
.language:hover .languageB{ display: block;}

.nav{ float: right; line-height: 66px; font-size: 18px;}
.nav a{ float: left;}
.nav s{ float: left; text-decoration: none; color: #999; font-size: 14px; margin: 0 10px;}



.sp_nav{ display: none;}

.menu{ display: none;}


#banner{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); padding: 0 10px; overflow: hidden;}
#banner img{ float: left; width: 100%;}


#contentA{ float: left; width:-webkit-calc(100% - 8px);width:-moz-calc(100% - 8px);width:calc(100% - 8px); margin: 12px 0 0 4px;}
#contentA a{ float: left; width:-webkit-calc(25% - 12px);width:-moz-calc(25% - 12px);width:calc(25% - 12px); margin:0 6px;}
#contentA a img{ float: left; width: 100%;}


#contentB{ float: left; width:-webkit-calc(100% - 60px);width:-moz-calc(100% - 60px);width:calc(100% - 60px); padding: 0 20px; margin: 12px 0 0 10px; height: 134px; background: url("../img/news_bj.jpg") no-repeat center center;}
#contentB dl{ float: left; width: 140px; margin: 12px 0 0 0;}
#contentB dl dt{ float: left; width: 100%; color: #fff; font-size: 22px; font-weight: bold;}
#contentB dl dd{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 5px 0 0 0; padding: 0 0 0 20px;}
#contentB dl dd a{ color: #fff; font-weight: bold;}
#contentB ul{ float: right; width:-webkit-calc(100% - 160px);width:-moz-calc(100% - 160px);width:calc(100% - 160px); margin: 12px 0 0 0;}
#contentB ul li{ float: left; width: 100%; line-height: 28px; color: #fff;}
#contentB ul li p{ float: left;width:-webkit-calc(100% - 160px);width:-moz-calc(100% - 160px);width:calc(100% - 160px);}
#contentB ul li p a{ float: left; max-width: 100%; overflow: hidden;white-space: nowrap;text-overflow: ellipsis; color: #fff;}
#contentB ul li s{ float: right; text-decoration: none;}



#contentC{ float: left; width:-webkit-calc(100% - 8px);width:-moz-calc(100% - 8px);width:calc(100% - 8px); padding: 0 4px;}
#contentC a{width:-webkit-calc(20% - 14px);width:-moz-calc(20% - 14px);width:calc(20% - 14px); border: 1px solid #333; float: left; margin: 10px 6px 6px 6px; /*box-shadow: 5px 5px 5px rgba(4,0,0,0.35);*/}
#contentC a img{ float: left; width: 100%;}


#bottom{width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); float: left; text-align: center; background: #9e7800; color: #fff; margin: 4px 10px 0 10px;}
#bottom ul{ float: left; width:100%; line-height: 36px;margin-top: 20px;}
#bottom ul li{ float: left; width: 16.66%;}
#bottom ul li a{ color: #fff;}
#bottom p{ width:100%; height: 36px; float: left; line-height: 36px; text-align: center;margin-top: 4px;}

@media screen and (min-width:760px) and (max-width:1299px){
    #bottom ul li a{font-size: 14px;}
    #bottom p{ width:100%; height: 36px; float: left; line-height: 36px; text-align: center;margin-top: 4px;font-size: 14px;}
}
/*index*/


/*contact*/
#contact{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 20px 10px 16px 10px;}
.contact_tit{ float: left; width: 100%;}
.contact_tit h2{ float: left; font-size: 30px; color: #1c599b;}
.contact_tit div{ float: right; line-height: 30px;}
.contact_tit div i{ float: left; width: 17px; margin: 5px 15px 0 0;}
.contact_tit div i img{ float: left; width: 100%;}
.contact_con{ float: left; width: 100%; margin: 10px 0 0 0;}
.contact_con_map{ float: left; width:-webkit-calc(50% - 17px);width:-moz-calc(50% - 17px);width:calc(50% - 17px); height: 356px; border: 2px solid #333;}
.contact_con_text{ float: right; width:-webkit-calc(50% - 15px);width:-moz-calc(50% - 15px);width:calc(50% - 15px);}
.contact_con_text dl{ float: left; width: 100%;}
.contact_con_text dl dt{ float: left; width: 100%; font-size: 22px; font-weight: bold; line-height: 28px; margin: 0 0 20px 0;}
.contact_con_text dl dd{ float: left; width: 100%; line-height: 38px;}
#dituContent{ float: left; width: 100%; height: 100%;}
/*contact*/



/*about*/
#route{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 18px 10px 16px 10px; border-bottom: 1px solid #ddd; padding: 0 0 20px 0;}
#route i{ float: left; width: 17px; margin: 5px 15px 0 0;}
#route i img{ float: left; width: 100%;}


#about{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 0 10px;}
.aboutA{ float: left; width: 100%; margin: 20px 0;}
.aboutA_tit{ float: left; width: 100%; font-size: 30px; color: #1c599b; font-weight: bold;}
.aboutA_con{ float: left; width: 100%; margin: 10px 0 0 0;}
.aboutA_con_img{ float: left; width:-webkit-calc(40% - 2px);width:-moz-calc(40% - 2px);width:calc(40% - 2px); border: 2px solid #333;}
.aboutA_con_img img{ float: left; width: 100%;}
.aboutA_con_text{ float: right; width:-webkit-calc(60% - 30px);width:-moz-calc(60% - 30px);width:calc(60% - 30px); line-height: 34px;}
.aboutA_con_text strong{ color: #1c599b;}
.aboutB{ float: left; width: 100%; margin: 20px 0;}
.aboutB_tit{ float: left; width: 100%; font-size: 30px; color: #1c599b; font-weight: bold;}
.aboutB_con{ float: left; width: 100%; margin: 20px 0 0 0;}
.aboutB_con_img{ float: left; width:-webkit-calc(40% - 2px);width:-moz-calc(40% - 2px);width:calc(40% - 2px); border: 2px solid #333;}
.aboutB_con_img img{ float: left; width: 100%;}
.aboutB_con_text{ float: right;width:-webkit-calc(60% - 30px);width:-moz-calc(60% - 30px);width:calc(60% - 30px); line-height: 34px;}
.aboutB_con_text strong{ font-size: 20px;}
/*about*/


/*privacy*/
#privacy{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 20px 10px;}
.privacy_tit{ float: left; width: 100%; font-size: 30px; color: #1c599b; font-weight: bold;}
.privacy_con{ float: left; width: 100%; margin: 20px 0 0 0; line-height: 36px;}
/*privacy*/



/*news*/
#news_banner{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 12px 10px 0 10px;}
#news_banner img{ float: left; width: 100%;}


#news{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 12px 10px 30px 10px;}
.news_tit{ float: left; width: 100%; font-size: 30px; color: #1c599b; font-weight: bold;}
.news_con{ float: left; width: 100%; margin: 30px 0 0 0;}
.news_con div{ float: left; width: 100%; line-height: 46px; background: url("../img/sjx2.png") no-repeat left center;}
.news_con div p{ float: left; width:-webkit-calc(100% - 140px);width:-moz-calc(100% - 140px);width:calc(100% - 140px); margin: 0 0 0 20px;}
.news_con div p a{overflow: hidden;white-space: nowrap;text-overflow: ellipsis; max-width: 100%; float: left;}
.news_con div s{ float: right; text-decoration: none; color: #999;}

.page{ float: left; width: 100%; margin: 30px 0 0 0;}
.page p{ float: left; margin: 0 10px 0 0;}
.page p a{ padding: 0 40px; height: 46px; line-height: 46px; border-radius: 23px; background: #fff; box-shadow: 5px 5px 5px rgba(4,0,0,0.35); float: left;}
.page ul{ float: left;}
.page ul li{ float: left; width: 46px; margin: 0 10px 0 0;}
.page ul li a{ float: left; width: 46px; height: 46px; line-height: 46px; text-align: center; background: #fff; box-shadow: 5px 5px 5px rgba(4,0,0,0.35); border-radius: 50%;}
.page ul li a.hov2{ color: #fff;background:-webkit-linear-gradient(to bottom right, #3d8adc, #1d5a9d););background:-o-linear-gradient(to bottom right, #3d8adc, #1d5a9d););background:-moz-linear-gradient(to bottom right, #3d8adc, #1d5a9d););background:linear-gradient(to bottom right, #3d8adc, #1d5a9d); font-weight: bold;}
/*news*/



/*news_1*/
#news_1{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 20px 10px;}
.news_1_tit{ float: left; width: 100%;}
.news_1_tit p{ float: left; width: 100%; font-size: 26px; font-weight: bold; color: #1c599b; line-height: 30px;}
.news_1_tit s{ float: left; width: 100%; text-decoration: none; color: #999; margin: 20px 0 0 0;}
.news_1_con{ float: left; width: 100%; margin: 30px 0 0 0; line-height: 36px;}
.news_1_con a{ color: #280cfb;}
/*news_1*/



/*products*/
#products{ float: left; width: 100%; margin: 10px 0 16px 0;}
.products_le{ float: left; width: 220px;}
.products_le a{ width:-webkit-calc(50% - 14px);width:-moz-calc(50% - 14px);width:calc(50% - 14px); border: 1px solid #333; float: left; margin: 10px 0 0 10px; /*box-shadow: 5px 5px 5px rgba(4,0,0,0.35);*/}
.products_le a img{ float: left; width: 100%;}
.products_ri{ float: left;margin-left:8px; width:-webkit-calc(100% - 230px);width:-moz-calc(100% - 230px);width:calc(100% - 230px);}
.products_ri a{ width:-webkit-calc(25% - 14px);width:-moz-calc(25% - 14px);width:calc(25% - 14px); border: 1px solid #333; float: left; margin: 10px 0 0 10px; /*box-shadow: 5px 5px 5px rgba(4,0,0,0.35);*/}
.products_ri a img{ float: left; width: 100%;}
/*products*/



/*products_1*/
#products_1{ float: left; width: 100%; margin: 10px 0 0 0;}
.products_1_ri{ float: left; width:-webkit-calc(100% - 230px);width:-moz-calc(100% - 230px);width:calc(100% - 230px);}
.products_1_riA{ float: left; width: 100%;}
.products_1_riA_1{ float: left; margin: 10px 0 10px 10px; width:-webkit-calc(50% - 20px);width:-moz-calc(50% - 20px);width:calc(50% - 20px);}
.products_1_riA_1a{ float: left; width:-webkit-calc(100% - 40px);width:-moz-calc(100% - 40px);width:calc(100% - 40px); height: 120px; background: #9e7800; color: #fff; padding: 30px 20px 0 20px;}
.products_1_riA_1a p{ float: left; width: 100%; font-size:28px; font-weight: bold; line-height: 40px;}
.products_1_riA_1a span{ float: left; width: 100%; margin: 15px 0 0 0; font-size: 18px;}
.products_1_riA_1b{ float: left; width:-webkit-calc(100% - 40px);width:-moz-calc(100% - 40px);width:calc(100% - 40px); height: 130px; background: #222; color: #fff; padding: 20px 20px 0 20px;}
.products_1_riA_1b p{ float: left; width: 100%; line-height: 34px; font-size: 16px;}
.products_1_riA_2{ float: left; width:-webkit-calc(50% - 10px);width:-moz-calc(50% - 10px);width:calc(50% - 10px); margin: 10px 0 0 10px;}
.products_1_riA_2 img{ float: left; width: 100%;}

.products_1_riB{ float: left;margin-left:20px; width:100%;}
/*.products_1_riB a{ margin:0 10px 10px 0;float: left; padding:0 20px; height: 58px; border: 1px solid #999; background: url("../img/pro_but_bj2.jpg") no-repeat center center;background-size: 100% 100%; outline: none; cursor: pointer; font-family:"微软雅黑", Arial; font-size:16px; line-height:58px; font-weight:bold; color:#333;}*/
.products_1_riB a{ width:-webkit-calc(33.33% - 42px);width:-moz-calc(33.33% - 42px);width:calc(33.33% - 42px); margin:10px; float: left; height: 20px; border: 1px solid #333; background: url("../img/pro_but_bj2.jpg") no-repeat center center; background-size: 100% 100%; padding:35px 10px 15px 10px; line-height:20px; color:#222; font-weight:bold; font-size:16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}
.products_1_riB a img{ margin:8px 15px 0 0; float:left;}
.products_1_riB a s,.products_1_riB s i{ text-decoration:none; font-style:normal;}
.pro_but{ float: left; width: 310px; height: 60px; background:url("../img/pro_but_bj.jpg") repeat-x; border: 1px solid #ddd; border-radius: 5px; outline: none; cursor: pointer;margin-right: 10px}

.products_1_riC{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 30px 0 0 20px; line-height: 34px;}
/*products_1*/



/*technology*/
#technology{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); margin: 20px 10px;}
.technology_img{ float: left; width:-webkit-calc(40% - 2px);width:-moz-calc(40% - 2px);width:calc(40% - 2px); border: 2px solid #333; box-shadow: 5px 5px 5px rgba(4,0,0,0.35);}
.technology_img img{ float: left; width: 100%;}
.technology_text{ float: right; width:-webkit-calc(60% - 30px);width:-moz-calc(60% - 30px);width:calc(60% - 30px); line-height: 34px;}
.technology_text h5{ font-size: 30px; color: #1c599b; line-height: 50px; float: left; width: 100%; margin: 0 0 10px 0;}
/*technology*/


/*brand*/
#brand{ float: left; width:94%; margin:3% 3% 0 3%; border-left: 1px solid #ddd; border-top: 1px solid #ddd;}
#brand a{ float: left; width:-webkit-calc(33.333% - 1px);width:-moz-calc(33.333% - 1px);width:calc(33.333% - 1px); border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
#brand a img{ float: left; width: 100%;}
/*brand*/


/*material_science*/
#material_science{ float: left; width: 100%; margin: 10px 0;}
#material_science a{ width:-webkit-calc(33.33% - 42px);width:-moz-calc(33.33% - 42px);width:calc(33.33% - 42px); margin:10px; float: left; height: 20px; border: 1px solid #333; background: url("../img/pro_but_bj2.jpg") no-repeat center center; background-size: 100% 100%; padding:35px 10px 15px 10px; line-height:20px; color:#222; font-weight:bold; font-size:16px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;text-align: center;}
/*material_science*/


@media screen and (min-width:1000px) and (max-width:1299px){
    #top{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); background: #fff; padding:10px;}
    #top h1{ float: left; height:46px; margin: 10px 0;}
    #top h1 img{ height: 100%; float: left;}

    .language{ float: left; margin:0 0 0 20px; padding: 20px 0; position: relative;}
    .languageA{ float: left; line-height: 22px; padding: 0 22px 0 0; cursor: pointer; background: url("../img/sjx.png") no-repeat right center;}
    .languageA i{ float: left; height: 22px; width: 22px;}
    .languageA p{ float: left; margin: 0 0 0 12px; font-size: 22px;}
    .languageB{ position: absolute; left: 0; top: 62px; z-index: 9; width: 100px; padding: 10px 0; border: 1px solid #ddd; display: none; background: #fff;}
    .languageB a{ float: left; width: 100%; text-align: center; color: #333; line-height: 36px;}
    .languageB a:hover{ color:#1c599b;}
    .language:hover .languageB{ display: block;}

    .nav{ float: right; line-height: 66px; font-size: 22px;}
    .nav a{ float: left;}
    .nav s{ float: left; text-decoration: none; color: #999; font-size: 16px; margin: 0 15px;}
}


@media screen and (min-width:900px) and (max-width:999px){
    #top{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); background: #fff; padding:10px;}
    #top h1{ float: left; height:46px; margin: 10px 0;}
    #top h1 img{ height: 100%; float: left;}

    .language{ float: left; margin:0 0 0 20px; padding: 22px 0; position: relative;}
    .languageA{ float: left; line-height: 20px; padding: 0 22px 0 0; cursor: pointer; background: url("../img/sjx.png") no-repeat right center;}
    .languageA i{ float: left; height: 18px; width: 18px;}
    .languageA i img{ float: left; width: 100%;}
    .languageA p{ float: left; margin: 0 0 0 12px; font-size: 20px;}
    .languageB{ position: absolute; left: 0; top: 62px; z-index: 9; width: 100px; padding: 10px 0; border: 1px solid #ddd; display: none; background: #fff;}
    .languageB a{ float: left; width: 100%; text-align: center; color: #333; line-height: 36px;}
    .languageB a:hover{ color:#1c599b;}
    .language:hover .languageB{ display: block;}

    .nav{ float: right; line-height: 66px; font-size: 18px;}
    .nav a{ float: left;}
    .nav s{ float: left; text-decoration: none; color: #999; font-size: 16px; margin: 0 10px;}
}


@media screen and (min-width:760px) and (max-width:900px){
    #top{ float: left; width:-webkit-calc(100% - 20px);width:-moz-calc(100% - 20px);width:calc(100% - 20px); background: #fff; padding:10px;}
    #top h1{ float: left; height:40px; margin: 13px 0;}
    #top h1 img{ height: 100%; float: left;}

    .language{ float: left; margin:0 0 0 10px; padding: 22px 0; position: relative;}
    .languageA{ float: left; line-height: 20px; padding: 0 18px 0 0; cursor: pointer; background: url("../img/sjx.png") no-repeat right center;}
    .languageA i{ float: left; height: 18px; width: 18px;}
    .languageA i img{ float: left; width: 100%;}
    .languageA p{ float: left; margin: 0 0 0 8px; font-size: 16px;}
    .languageB{ position: absolute; left: 0; top: 62px; z-index: 9; width: 100px; padding: 10px 0; border: 1px solid #ddd; display: none; background: #fff;}
    .languageB a{ float: left; width: 100%; text-align: center; color: #333; line-height: 36px;}
    .languageB a:hover{ color:#1c599b;}
    .language:hover .languageB{ display: block;}

    .nav{ float: right; line-height: 66px; font-size: 16px;}
    .nav a{ float: left;}
    .nav s{ float: left; text-decoration: none; color: #999; font-size: 12px; margin: 0 8px;}
}